<template>
	<view class="content-box">
		
		<view class="search-box" @click="clickSearchInput">
			<uni-search-bar placeholder="请输入要搜索的音乐" cancelButton="none"></uni-search-bar>
		</view>
		<view class="swiper-box">
			<carousel :img-list="imgList" url-key="url" />
		</view>
		<view class="recommend-playlist-box">
			<view class="title">
				<text>推荐歌单</text>
				<text>更多></text>
			</view>
			<view class="items">
				<scroll-view scroll-x="true" class="scroll-view">
					<view class="scroll-view-item" v-for="(recommendSongItem,index) in recommentSongList"
						@click="skipToShowSongList(recommendSongItem.id)">
						<view class="cover">
							<image :src="recommendSongItem.cover"></image>
						</view>
						<view class="content">{{recommendSongItem.name}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="guess-like-box">
			<view class="title">猜你喜欢</view>
			<view class="items">
				<scroll-view scroll-x="true" class="scroll-view">
					<view class="scroll-view-item" v-for="songItem in guessLikeSongList">
						<view v-for="subSongItem in songItem.children">
							<div class="content" v-if="subSongItem">
								<view class="left">
									<view class="cover">
										<image :src="subSongItem.al.picUrl"></image>
									</view>
									<view class="song-items">
										<view class="songname">{{subSongItem.name}}</view>
										<view class="artist-album">{{subSongItem.ar[0].name}}</view>
									</view>
								</view>
								<view class="right">
									<!-- <image src="../../static/images/playMusicImg/play-icon.png"
										@click="playMusic(index)">
									</image> -->
									<view class="play-btn" v-if="!subSongItem.isplay" @click="playMusic(subSongItem)">
										<text>▶</text>
									</view>
									<view class="pause-btn" v-else @click="pauseMusic(subSongItem)">
										<text>| |</text>
									</view>
								</view>
							</div>
						</view>


					</view>

				</scroll-view>
			</view>
		</view>

		<view class="player">
			<playBar :musicItems='playSongList'></playBar>
		</view> 
		<!-- 加载页面动画 -->
		<Loading :isLoading="isLoading"></Loading>
	</view>
</template>
 
<script>
	import carousel from '@/components/vear-carousel/vear-carousel'
	import Loading from '../../components/loading/loading.vue'
	const backgroundAudio = uni.getBackgroundAudioManager();


	export default {
		components: {
			carousel,
			Loading
		},
		data() {
			return {
				// 是否加载页面
				isLoading:true,
				// 搜索框的值
				searchValue: '',
				// 轮播图图片列表
				imgList: [{
					url: 'http://p1.music.126.net/4U2j0uDIoLFBxIR7P1k0rw==/109951166060047951.jpg?imageView&quality=89',
					id: 1
				}, {
					url: 'http://p1.music.126.net/nyrBbywQFib1UmGPY39X2Q==/109951166064299852.jpg?imageView&quality=89',
					id: 2
				}, {
					url: 'http://p1.music.126.net/LqeJALMTGSzFcXosVoMRhg==/109951166060177875.jpg?imageView&quality=89',
					id: 3
				}, {
					url: 'http://p1.music.126.net/od3dimfBqaRuB6RShJFP4w==/109951166064304843.jpg?imageView&quality=89',
					id: 4
				}, ],
				// 推荐歌单列表
				recommentSongList: [],
				// 音乐播放信息
				playSongList: {
					name: '',
					artist: '',
					src: '',
					pic: '',
					isplay: false,
					playTime: 0
				},
				// 猜你喜欢歌单列表
				guessLikeSongList: [],

			}
		},
		onLoad() {
			console.log('123',this.$store)
			if (uni.getStorageSync("musicItem") != '')
				this.playSongList = uni.getStorageSync("musicItem")
			this.getRecommendSongList()
			this.getGuessLikeSongList()
			uni.setStorageSync("currentPage", "index")
			
		},
		onShow() {
			if (uni.getStorageSync("musicItem") != '') {
				this.playSongList = uni.getStorageSync("musicItem")
			}

			uni.setStorageSync("currentPage", "index")
		},

		methods: {
			// 搜索音乐
			searchMusic(e) {
				console.log(e)

			},
			// 点击搜索框
			clickSearchInput() {
				uni.navigateTo({
					url: '../searchMusic/searchMusic'
				})

			},
			// 获取推荐歌单
			getRecommendSongList() {
				uni.request({
					url: 'http://music.jsososo.com/apiMix/playlist/recommend',
					data: {
						login: 0,
						_p: 163,
						pageSize: 10
					},
					success: res => {
						this.recommentSongList = res.data.data
					},
					fail: err => {
						console.log('获取推荐歌单失败')
					}
				})
			},
			// 跳转到推荐歌单
			skipToShowSongList(id) {
				uni.navigateTo({
					url: '../recommendSongList/recommendSongList?id=' + id + '&_p=163',
				})
			},
			// 获取猜你喜欢歌单
			getGuessLikeSongList() {
				uni.request({
					url: 'http://music.jsososo.com/apiMix/search',
					data: {
						key: '刘珉轩',
						pageNo: 1,
						pageSize: 9,
						type: 0,
						_p: 163,

					},


					success: res => {
						let arr = []
						let song = {}
						song.children = []
						let song1 = {}
						song1.children = []
						let song2 = {}
						song2.children = []
						let count = 0
						res.data.data.list.map((item, index) => {
							if (index < 3) song.children[index] = item
							if (index >= 3 && index < 6) song1.children[index] = item
							if (index >= 6 && index < 9) song2.children[index] = item
							if (count == 2) {
								song.id = 2
								song.name = 'first'
								arr.push(song)
							}
							if (count == 5) {
								song1.id = 5
								song1.name = 'second'
								arr.push(song1)
							}
							if (count == 8) {
								song2.id = 8
								song2.name = 'third'

								arr.push(song2)
							}
							count++

						})
						this.guessLikeSongList = arr
						console.log(arr)
					},
					fail() {
						console.log('获取猜你喜欢歌单失败')
					}
				})
				
			},
			// 播放音乐
			playMusic(songItem) {


				uni.request({
					url: 'http://music.jsososo.com/api/song/url',
					data: {
						id: songItem.id,

					},
					success: res => {

						// innerAudioContext.autoplay = false;
						backgroundAudio.title = songItem.name
						backgroundAudio.singer = songItem.ar[0].name
						backgroundAudio.coverImgUrl = songItem.al.picUrl
						backgroundAudio.src = res.data.data[0].url

						// innerAudioContext.src = res.data.data[0].url
						this.playSongList.src = res.data.data[0].url

						// if (innerAudioContext.paused) {
						// 	innerAudioContext.play()
						// 	innerAudioContext.onPlay(() => {
						// 		console.log('开始播放');
						// 	});
						// 	innerAudioContext.onError((res) => {
						// 		console.log(res.errMsg);
						// 		console.log(res.errCode);
						// 	});

						// } else {
						// 	innerAudioContext.stop()
						// 	innerAudioContext.play()
						// 	innerAudioContext.onPlay(() => {
						// 		console.log('开始播放');
						// 	});
						// 	innerAudioContext.onError((res) => {
						// 		console.log(res.errMsg);
						// 		console.log(res.errCode);
						// 	});

						// }

					}
				})
				this.playSongList.id = songItem.id
				this.playSongList.pic = songItem.al.picUrl
				this.playSongList.artist = songItem.ar[0].name
				this.playSongList.name = songItem.name
				this.playSongList.isplay = true
				this.playSongList.playTime = songItem.duration
				


				this.guessLikeSongList.map((item, index) => {
					item.children.map((subItem, index2) => {
						if (subItem.id == this.playSongList.id) subItem.isplay = true
						else subItem.isplay = false
					})
				})

				if (uni.getStorageSync("currentPlaySongPage") == 'searchSong')
					uni.$emit("controlSearchMusic", 'stopMusic')
				else if (uni.getStorageSync("currentPlaySongPage") == 'recommendSong')
					uni.$emit("controlRecommendMusic", 'stopMusic')

				uni.setStorageSync("currentPlayItem", songItem)
				uni.setStorageSync("currentPlaySongPage", "indexSong")
				uni.setStorageSync('musicOnPlay', '1')
				uni.setStorageSync('musicItem', this.playSongList)

			},
			// 暂停音乐
			pauseMusic(songItem) {
				backgroundAudio.pause()
				this.guessLikeSongList.map((item, index) => {
					item.children.map((subItem, index2) => {
						if (subItem.id == this.playSongList.id) {

							subItem.isplay = false

						}

					})
				})
				this.playSongList.isplay = false
				uni.setStorageSync("musicOnPlay", "0")
				uni.setStorageSync('musicItem', this.playSongList)
			},
			// 音乐计时器
			musicInterVal() {
				this.countInterval = setInterval(() => {
					if ((uni.getStorageSync("currentPage") == "index") && uni.getStorageSync(
							"currentPlaySongPage") == "searchSong" || uni.getStorageSync("currentPlaySongPage") ==
						"recommendSong") {
						if (uni.getStorageSync("musicOnPlay") == '1') {
							this.playSongList.isplay = true
							this.guessLikeSongList.map((item, index) => {
								item.children.map((subItem, index2) => {
									if (subItem.id == this.playSongList.id) subItem.isplay = true
									else subItem.isplay = false
								})

							})
						} else if (uni.getStorageSync("musicOnPlay") == '0') {
							this.playSongList.isplay = false
							this.guessLikeSongList.map((item, index) => {
								item.children.map((subItem, index2) => {
									if (subItem.id == this.playSongList.id) subItem.isplay = false

								})

							})
						}

					} else if (backgroundAudio.duration != false && backgroundAudio.currentTime != false) {
						console.log(backgroundAudio.duration - backgroundAudio.currentTime)
						if ((backgroundAudio.duration - backgroundAudio.currentTime) <= 0.5 && uni
							.getStorageSync("currentPlaySongPage") == "indexSong") {

							backgroundAudio.stop()
							this.playSongList.isplay = false
							this.guessLikeSongList.map((item, index) => {
								item.children.map((subItem, index2) => {
									if (subItem.id == this.playSongList.id) subItem.isplay = false

								})
							})
							uni.setStorageSync('musicOnPlay', '0')
							uni.setStorageSync('musicItem', this.playSongList)
						}
					}
					if (uni.getStorageSync("currentPlaySongPage") != "indexSong")
						this.guessLikeSongList.map((item, index) => {
							item.children.map((subItem, index2) => {
								subItem.isplay = false
							})
						})


				}, 1000)
			}
		},
		onReady() {
			setTimeout(()=>{
				this.isLoading = false
			},2000)
			// 监听音乐是否结束
			this.musicInterVal()
			// 被其他页面调用

			uni.$on("controlIndexMusic", (msg, data) => {
				if (msg == "playMusic") {
					this.playMusic(data)
					backgroundAudio.pause()
					backgroundAudio.play()
					this.guessLikeSongList.map((item, index) => {
						item.children.map((subItem, index2) => {
							if (subItem.id == this.playSongList.id) subItem.isplay = true
							else subItem.isplay = false
						})

					})
					this.playSongList.isplay = true
					uni.setStorageSync('musicOnPlay', '1')

					uni.setStorageSync('musicItem', this.playSongList)
				} else if (msg == "pauseMusic") {
					backgroundAudio.pause()
					this.guessLikeSongList.map((item, index) => {
						item.children.map((subItem, index2) => {
							if (subItem.id == this.playSongList.id) subItem.isplay = false

						})
					})
					this.playSongList.isplay = false
					uni.setStorageSync('musicOnPlay', '0')

					uni.setStorageSync('musicItem', this.playSongList)
				} else if (msg == "stopMusic") {
					backgroundAudio.stop()


				} else if (msg == "refreshMusicStatus")
					this.playSongList = uni.getStorageSync("musicItem")
				else if (msg == "refreshCurrentTime") {

					uni.setStorageSync('duration', backgroundAudio.duration)
					uni.setStorageSync("currentTime", backgroundAudio.currentTime)
				}
			})

		}
	}
</script>

<style lang="scss">
	.content-box {
		.search-box {
			position: fixed;
			top: 0;
			width: 100%;
			height: 120rpx;
			background-color: white;
			z-index: 1000;

		}

		.swiper-box {
			width: 100%;
			margin-top: 90rpx;

			.item {
				width: $unit-box-width;
				height: 250rpx;
				background-color: red;
				margin: 0 auto;
			}
		}

		.recommend-playlist-box {
			width: $unit-box-width;
			margin: 0 auto;

			.title {
				display: flex;
				justify-content: space-between;

				text:nth-child(1) {
					font-weight: bold;
				}

				text:nth-child(2) {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}
			}

			.items {

				display: flex;
				justify-content: space-between;
				white-space: nowrap;
				margin-top: 20rpx;

				.scroll-view {
					width: 100%;

				}

				.scroll-view-item {
					width: 170rpx;
					height: 100%;
					display: inline-block;
					margin-right: 10rpx;
					font-size: $uni-font-size-base;

					.cover {
						image {
							width: 170rpx;
							height: 170rpx;
							background-color: skyblue;
							border-radius: 5rpx;
						}
					}

					.content {
						display: -webkit-box;
						width: 170rpx;
						height: 78rpx;
						white-space: normal;
						word-break: break-word;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
			}

		}

		.guess-like-box {
			margin-top: 10rpx;
			width: $unit-box-width;
			margin: 0 auto;

			.title {
				font-weight: bold;
			}

			.items {
				margin-top: 10rpx;
				margin-bottom: 105rpx;
				display: flex;
				justify-content: space-between;
				white-space: nowrap;

				.scroll-view {
					width: 100%;

				}

				.scroll-view-item {
					display: inline-block;
					width: 700rpx;

					.content {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 600rpx;

						.left {
							display: flex;
							font-size: $uni-font-size-base;
							margin-bottom: 10rpx;

							.cover {

								image {
									width: 140rpx;
									height: 140rpx;
									border-radius: 5px;
									margin-right: 50rpx;

								}
							}

							.song-items {
								line-height: 70rpx;

								.songname {
									width: 300rpx;
									overflow: hidden;
									text-overflow: ellipsis;

								}

								.artist-album {
									font-size: 20rpx;
									color: $uni-text-color-grey;
								}
							}
						}

						.right {
							line-height: 150rpx;

							.play-btn {
								width: 80rpx;
								height: 50rpx;
								background-color: #EEEDEF;
								border-radius: 320rpx;
								line-height: 40rpx;
								text-align: center;

								text {
									font-size: $uni-font-size-base;
									color: #6B90D7;
								}
							}

							.pause-btn {
								width: 80rpx;
								height: 50rpx;
								background-color: #EEEDEF;
								border-radius: 320rpx;
								line-height: 31rpx;
								text-align: center;

								text {
									font-size: 18rpx;
									color: #6B90D7;
									font-weight: bolder;
								}
							}

							// image {
							// 	width: 50rpx;
							// 	height: 50rpx;
							// }
						}
					}

				}
			}
		}

		/* #ifdef H5*/
		.player {
			width: 750rpx;
			position: fixed;
			bottom: 160rpx;
			text-align: center;

		}

		/* #endif */
		/* #ifdef MP-WEIXIN*/
		.player {
			width: 750rpx;
			position: fixed;
			bottom: 60rpx;
			text-align: center;

		}

		/* #endif */


	}
</style>
